import React, { memo, useState, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';

import { CenterWrapper } from './style';

import IconSearch from 'src/assets/svg/icon_search_bar';
import SearchTbas from './c-cpns/search-tabs';
import SearchSections from './c-cpns/search-sections';

// data

import searchTitleData from '@/assets/data/search_titles.json';

const HeaderCenter = memo((props) => {
  const { isSearch, searchBarClick } = props;
  const [curIndex, setCurIndex] = useState(0);

  const barRef = useRef(null);
  const detailRef = useRef(null);

  const titles = searchTitleData.map((item) => item.title);
  const searchInfosArr = searchTitleData.map((item) => item.searchInfos);

  function tabClickHandle(index) {
    // console.log(`tabClickHandle ${index}`);
    setCurIndex(index);
  }

  function searchBarClickHandle() {
    if (searchBarClick) searchBarClick();
  }
  return (
    <CenterWrapper>
      <CSSTransition in={!isSearch} classNames="bar" timeout={250} unmountOnExit={true} nodeRef={barRef}>
        <div className="search-bar" onClick={(e) => searchBarClickHandle()}>
          <div className="text">搜索房源和体验</div>
          <div className="icon">
            <IconSearch />
          </div>
        </div>
      </CSSTransition>

      <CSSTransition in={isSearch} classNames="detail" timeout={250} unmountOnExit={true} nodeRef={detailRef}>
        <div className="search-detail">
          <SearchTbas titles={titles} tabClick={(e) => tabClickHandle(e)} />
          <div className="infos">
            <SearchSections searchInfos={searchInfosArr[curIndex]} />
          </div>
        </div>
      </CSSTransition>
    </CenterWrapper>
  );
});

export default HeaderCenter;
